<template>
  <div style="min-width: 829px">
    <div v-if="$route.path == '/userAnalyse'">
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="110px">
          <el-form-item label="门店">
            <el-select v-model="paging.store_id" placeholder="请选择">
              <el-option
                v-for="item in shopList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期：">
            <el-date-picker
              @change="getDate"
              v-model="value1"
              value-format="yyyy-MM-dd"
              style="width: 250px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
            <el-button icon="el-icon-download" @click="derive" :loading="isDerive">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
          height="calc(100vh - 310px)"
        >
          <el-table-column prop="day" label="日期"></el-table-column>
          <el-table-column prop="phone" label="电话点击数（次）">
          </el-table-column>
          <el-table-column prop="map" label="地图点击使用数（次）">
          </el-table-column>
          <el-table-column prop="subscribe" label="实际电话预约数量（次）">
          </el-table-column>
          <el-table-column prop="goods" label="商品数量">
          </el-table-column>
          <el-table-column prop="project" label="项目数量">
          </el-table-column>
        </el-table>
        <!-- <div class="vs-paging-box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="sizes,prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div> -->
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      loading: false,
      paging: {
        store_id: 0,
        start_time: "", //开始时间
        end_time: "", //结束时间
        page: 1,
        total: 0,
        limit: 10,
      },
      tableData: [],
      shopList: [],
      isDerive:false,
    };
  },
  created() {
    let date1 = this.getCurrentMonthFirst();
    let date2 = this.getCurrentMonthLast();
    this.paging.start_time = date1;
    this.paging.end_time = date2;
    this.value1 = [date1, date2];
    this.getUsers();
    this.homegetStore();
  },
  methods: {
    //用户数据分析导出
      async derive(){
            this.isDerive = true;
            let res = await this.$Http.exportUser(this.paging);
            this.utils.downloadXlsx(res,'用户数据分析')
            this.isDerive = false;
      },
    async homegetStore() {
      //门店数据
      let { code, data } = await this.$Http.homegetStore();
      if (code) {
        let obj = {
          id: 0,
          title: "全部",
        };
        this.shopList = [obj, ...data];
      }
    },
    getCurrentMonthFirst() {
      //获取当月第一天的值
      var date = new Date();
      date.setDate(1);
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return date.getFullYear() + "-" + month + "-" + day;
    },

    getCurrentMonthLast() {
      //获取当月最后一天的值
      var date = new Date();
      var currentMonth = date.getMonth();
      var nextMonth = ++currentMonth;
      var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
      var oneDay = 1000 * 60 * 60 * 24;
      var lastTime = new Date(nextMonthFirstDay - oneDay);
      var month = parseInt(lastTime.getMonth() + 1);
      var day = lastTime.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return date.getFullYear() + "-" + month + "-" + day;
    },

    async getUsers() {
      // 用户分析数据
      this.loading = true;
      console.log(1233333, this.tableData);
      let { code, data } = await this.$Http.getUsers(this.paging);
      this.loading = false;
      if (code) {
        this.tableData = data;
      }
    },
    getDate(e) {
      this.paging.start_time = e[0];
      this.paging.end_time = e[1];
      console.log(e, "ddd");
    },
    reset() {
      //重置
      // this.value1 = ''
      // this.paging = {
      //     store_id: '',
      //     start_time: '',//开始时间
      //     end_time: '',//结束时间
      //     page:1,
      //     limit:15,
      // }
      // this.tableData = []
      this.paging = this.$options.data().paging;
      let date1 = this.getCurrentMonthFirst();
      let date2 = this.getCurrentMonthLast();
      this.value1 = [date1, date2];
      this.paging.start_time = date1;
      this.paging.end_time = date2;
      this.getUsers();
    },
    handleSizeChange(val) {
      this.paging.limit = val;
      this.getUsers();
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.getUsers();
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
</style>